/*----------------------------------------*\
  TOP BAR
\*----------------------------------------*/

.top-bar {
  @apply bg-secondary-600;
  @apply text-sm 2xl:text-base text-white;
}

.top-bar__bar {
  @apply bg-secondary-600;

  .top-bar--is-open & {
    @apply bg-secondary-700;
  }

  .container {
    @apply h-full;
  }
}

.top-bar__bar--easy-language {
  @apply !bg-[#466975];
}

.top-bar__bar--sign-language {
  @apply !bg-indigo-800;
}

.top-bar__drawer {
  @apply pt-6 md:pt-8;
  @apply bg-secondary-600 text-white;
}

.top-bar__drawer__close {
  @apply flex justify-end;
}

.top-bar__drawer__close__btn {
  @apply flex items-center;
}

.top-bar__main-title {
  @apply py-3 md:py-4;
  @apply text--xl;
}

.top-bar__title {
  @apply min-h-[1.5rem];
  @apply text--lg;
  @apply mb-6 leading-5;

  & + p {
    @apply mb-6;
  }
}

.localization {
  @apply my-6 md:my-7 lg:my-8;

  ul {
    @apply flex flex-wrap;
  }

  li {
    @apply flex items-center;
  }

  li:last-of-type {
    @apply w-full md:w-auto;
  }

  a {
    @apply text-secondary-100 my-2;

    &.active {
      @apply text-white font-bold;
      @apply border-l-2 border-primary-600 pl-2;
    }
  }

  .localization__icon {
    @apply mx-4;
  }
}

.top-bar__grid {
  @apply grid grid-cols-6;
  @apply gap-x-9 lg:gap-x-10 xl:gap-x-12 2xl:gap-x-16;
  @apply pt-5;

  grid-template-rows: auto 1fr;

  & .search {
  }

  & .search__results {
    @apply max-h-[60vh] relative;

    @media (min-width: theme('screens.md')) {
      max-height: none;
      height: calc(100% - 10.5rem);
      position: absolute;
    }
  }
}

.top-bar__grid__box-1 {
  @apply col-span-6 md:col-span-3 pb-14;
  @apply lg:col-span-2 lg:row-span-1;
}

.top-bar__grid__box-2 {
  @apply col-span-6 md:col-span-3;
  @apply lg:col-span-2 lg:row-start-2;
}

.top-bar__grid__box-3 {
  @apply col-span-6 md:col-span-3 pb-14;
  @apply lg:col-span-2 lg:col-start-3 lg:row-start-1 lg:row-end-3;
}

.top-bar__grid__box-4 {
  @apply col-span-6 md:col-span-3 relative pb-14;
  @apply lg:col-span-2 lg:col-start-5 lg:row-start-1 lg:row-end-3;
}

.top-bar__btn {
  @apply flex items-center text-left;
  @apply hover:text-text-300 focus:text-text-300;
  @apply pl-4 -ml-4;
  @apply py-1;
  min-height: 2.75rem;
  @apply bg-secondary-600;
  @apply transition-colors;
  span {
    @apply w-min sm:w-full;
  }
}

.top-bar__btn__icon {
  @apply ml-2;
  @apply transition-transform duration-200;

  .top-bar--is-open & {
    @apply rotate-180;
  }
}

.top-bar__navigation {
  @apply h-full;
}

.top-bar__right {
  @apply flex items-center;
  /* Overwrite badge close icon color */
  .badge__icon{
    @apply text-gray-800;
    @apply bg-inherit;
  }
  .badge {
    @apply cursor-pointer;
    @apply mr-2 lg:mr-0;
    @apply my-2;
  }
}

.sticky-top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}